<template>
  <div id="type-column"></div>
</template>

<script>
  import { Column } from '@antv/g2plot';
  export default {
    name: "typeColumn",
    mounted() {
      const data = [
        {
          type: '运动战',
          goals: 8,
        },
        {
          type: '定位球',
          goals: 1,
        },
        {
          type: '点球',
          goals: 6,
        },
      ];
      const columnPlot = new Column('type-column', {
        data,
        xField: 'type',
        yField: 'goals',
        label:{
          style:{
            fill:'black',
            fontSize:20,
          },
          position:top
        },
        columnStyle:{
          fill:'#1A936F',
          shadowColor:'red'
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
          tickLine:null
        },
        yAxis:{
          grid:null,
          label:null,
          max:10
        },
        meta: {
          type: {
            alias: '类别',
          },
          goals: {
            alias: '进球数',
          },
        },
        tooltip:{
          showMarkers:true
        },
        minColumnWidth: 90,
        maxColumnWidth: 90,
      });
      columnPlot.render();
    }
  }
</script>

<style scoped>
   #type-column {
     width: 100%;
     height: 100%;
   }
</style>